<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0">
	
<title>注册</title>

<link href="static/Theme/css/base.css" rel="stylesheet">
<link href="static/Theme/css/login.css" rel="stylesheet">
<script src="static/Theme/js/jquery-1.11.2.min.js"></script>
	<style>
		.captcha_img {
			width: 4.5rem;
			height: 1.2rem;
			position: absolute;
			top: .3rem;
			right: 0;
		}
	</style>
</head>

<body>
<header class="header">
	<div class="header-return">
	    <a href="javascript:history.go(-1);"></a>
	</div>
	
	<div class="logo">注册</div>
</header>

<section class="container">
	<div class="register">
		<div class="form-widget">
			<form>
				<div class="form-box">
					<div class="form-group">
						<label class="form-label">邀请码</label>

						<div class="form-control">
							<input name="inviteCode" placeholder="没有邀请码不能注册" onfocusout=checkInviteCode()>
						</div>
					</div>

					<div class="form-group">
						<label class="form-label">昵&nbsp;&nbsp;称</label>

						<div class="form-control">
							<input name="nick" placeholder="请输入昵称" onfocusout=checkNick()>
						</div>
					</div>

					<div class="form-group">
						<label class="form-label">手机号码</label>

						<div class="form-control form-phone">
							<span>+86</span>
							<input name="tel" placeholder="您的手机号码" onfocusout=checkTel() >
						</div>
					</div>

					<div class="form-group">
						<label class="form-label">登录密码</label>

						<div class="form-control">
							<input name="pwd" type="password" placeholder="设置密码6-12位字母、数字组成" onfocusout=checkPwd()>
						</div>
					</div>

					<div class="form-group">
						<label class="form-label">支付密码</label>

						<div class="form-control">
							<input name="payPwd" type="password" placeholder="请输入6位数字支付密码" onfocusout=checkPayPwd()>
						</div>
					</div>
					<div class="form-group">
						<label class="form-label">验证码</label>
						<div class="form-control ">
							<input name="code" placeholder="请输入图中的字符" onfocusout=checkCode()>
							<img class="captcha_img" src="{:url('index/captcha')}?{:rand()}" onclick="this.src='{:url('index/captcha')}'+'?'+Math.random()" alt="captcha" />
						</div>
					</div>
				</div>
				<div class="form-submit">
					<button type="button" id="reg" class="form-submit-btn">确定</button>
				</div>
			</form>
		</div>
	</div>
</section>
</body>
<script>

	$("#reg").click(function () {
		let inviteCode = $("input[name='inviteCode']").val();
		let nick = $("input[name='nick']").val();
		let tel = $("input[name='tel']").val();
		let pwd = $("input[name='pwd']").val();
		let payPwd = $("input[name='payPwd']").val();
		let code = $("input[name='code']").val();

		if(!inviteCode){
			alert("请输入6位邀请码");
			return false;
		}else{
			checkInviteCode();
		}
		if(!nick){
			alert("请设置昵称");
			return false;
		}else{
			checkNick();
		}
		let reg=/^[1][3,4,5,7,8][0-9]{9}$/;
		if (!reg.test(tel)) {
			alert("手机号码有误，请重填");
			return false;
		}else{

		}

		if(!/^[A-Za-z0-9]{6,12}$/.test(pwd)){
			alert("设置密码6-12位字母、数字组成");
			return false;
		}

		if(!/^\d{6}$/.test(payPwd)){
			alert("支付密码为6位数字");
			return false;
		}
		if(!code){
			alert("请输入验证码");
			return false;
		}
		$.ajax({
			type: "POST",
			url: "checkCode",
			data: {code:code},
			dataType: "json",
			success: function (res) {
				if (res.code == 500) {
					alert(res.msg);
					return false;
				}else{
					$.ajax({
						type: "POST",
						url: "ApiReg",
						data: {inviteCode:inviteCode,nick:nick,tel:tel,pwd:pwd,payPwd:payPwd},
						dataType: "json",
						success: function (res) {
							if (res.code == 500) {
								alert(res.msg);
								return false;
							}else{
								alert(res.msg);
								setTimeout("top.location.href = '" + res.data + "'",1500);
							}
						}
					});
				}
			}
		});
	})



	function checkPwd() {
		let pwd = $("input[name='pwd']").val();
		if(!/^[A-Za-z0-9]{6,12}$/.test(pwd)){
			alert("设置密码6-12位字母、数字组成");
			return false;
		}
	}
	function checkPayPwd() {
		let payPwd = $("input[name='payPwd']").val();
		if(!/^\d{6}$/.test(payPwd)){
			alert("支付密码为6位数字");
			return false;
		}
	}

	function checkTel(){
		let tel = $("input[name='tel']").val();
		$.ajax({
			type: "POST",
			url: "checkTel",
			data: {tel:tel},
			dataType: "json",
			success: function (res) {
				if (res.code == 500) {
					alert(res.msg);
					return false;
				}
			}
		});
	}
	function checkInviteCode(){
		let inviteCode = $("input[name='inviteCode']").val();
		$.ajax({
			type: "POST",
			url: "checkInviteCode",
			data: {inviteCode:inviteCode},
			dataType: "json",
			success: function (res) {
				if (res.code == 500) {
					alert(res.msg);
					return false;
				}
			}
		});
	}
	function checkNick(){
		let nick = $("input[name='nick']").val();
		$.ajax({
			type: "POST",
			url: "checkNick",
			data: {nick:nick},
			dataType: "json",
			success: function (res) {
				if (res.code == 500) {
					alert(res.msg);
					return false;
				}
			}
		});
	}

	// 60s获取验证码的js与html
	let timer = null;
	let count = 60;
	$("#getCode").click(function(){
		let tel = $("input[name='tel']").val();
		console.log(tel)
		let reg=/^[1][3,4,5,7,8][0-9]{9}$/;
		if (!reg.test(tel)) {
			alert("手机号码有误，请重填");
			return false;
		}
		let codeText = $('.code').text();
		if (codeText == '获取验证码') {
			console.log(0)
			$.ajax({
				type: "GET",
				url: "sendCode",
				data: "tel="+tel,
				dataType: "json",
				success: function (res) {
					if (res.code == 200) {
						timer = setInterval(function () {
							count--;
							$('.code').text(count + '后获取验证码');
							if (count <= 0) {
								clearInterval(timer);
								$('.code').text('获取验证码');
							}
						}, 1000);
					}else{
						alert(res.msg);
					}
				},
				error: function (res) {
					alert(res.msg)
				}
			});
		}
	});

</script>
</html>
